<template>
	<view class="view">
		<view style="display: flex;width: 100%;height: 100%;">
			<view
				style="padding-left: 10px; display: flex;flex-direction: column;flex:3; background-color: #F0E68C; height: 100%;">
				<view @click="typeClick(index)" style="padding-top: 10px; border-bottom: 1px solid #ddd;" v-for="(item,index) in type"
					:key="index" :class="{'font' : typeIndex==index}">
					<text>{{item.type}}</text>
				</view>
			</view>

			<view class="whole_right" >
							<view class="whole_right_dog"  v-for="(item,index) in cakelist" :key="index" @click="caketo(index)">					
								
									<image :src="item.cakeImage" style="width: 240rpx;height: 240rpx;float: left;" @click="applyId(index)"></image>
									<view class="whole_right_dog_title" style="padding-left: 15px;" @click="applyId(index)">
										<text>{{item.cakeName}}</text>
										<text>购买数:{{item.cakeNumber}}</text>
									<uni-rate :max="5" :value="item.cakeScore" />
									<text style="font-weight: bold;color: #800;">${{item.cakeMoney}}</text>
									
								</view>
							</view>
						</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: [],
				typeIndex: 0,
				cakelist: []
			}
		},
		methods: {
			caketo(index){
				uni.navigateTo({
					url: '/pages/cake/cake?id='+this.cakelist[index].id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		
			typeClick(index){
				this.typeIndex=index
				this.getCakeList(this.type[index].type)
			},
			getType() {
				uni.request({
					url: this.api.type,
					method: 'GET',
					data: {},
					success: res => {
						if (res.data.code == 200) {
							this.type = res.data.obj
							this.getCakeList(this.type[0].type)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getCakeList(type) {
				uni.request({
					url: this.api.findByType,
					method: 'POST',
					data: {
						type: type
					},
					success: res => {
						this.cakelist = res.data.obj
						for (var i = 0; i < this.cakelist.length; i++) {
							this.cakelist[i].cakeImage = "http://127.0.0.1:8989/" + this.cakelist[i].cakeImage
						}
						console.log(this.cakelist);

					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onLoad() {
			this.getType()
		}
	}
</script>

<style lang="scss">
	page,
	.view {
		width: 100%;
		height: 100%;
	}

	.font {
		font-weight: bold;
		font-size: 18px;
	}
	.whole_right {
			width: 100%;
			height: 100%;
			flex: 9;
		}
		.whole_right_dog {
				// width: 100%;
				// height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: left;
				margin-top: 10px;
				margin-left: 10px;
				& .whole_right_dog_title {
					display: flex;
					flex-direction: column;
					font-size: 12px;
		
					& text {
						display: -webkit-box;
						display: -webkit-box;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
					}
				}
			}
</style>
